<template>
    <div class="demoContent">
        <div class="demoBox">
            <div class="demoBoxItem" v-for="(item, index) in demoList" :key="item.id" @click="goDemoItem(item)">
                <p>{{ item.title }}</p>
            </div>
        </div>
        <!-- 判断开发者的弹窗 -->
        <van-dialog v-model:show="dialogShow" title="模块限开发者使用，请输入密码：" show-cancel-button @cancel="onCancel" @confirm="onConfirm">
            <div style="height: 100px;display: flex;align-items: center;justify-content: center;">
                <div style="padding: 5px;">
                    <van-field v-model="password" label="" type="password" maxlength="10" autofocus clearable placeholder="请输入开发者密码"></van-field>
                </div>
            </div> 
        </van-dialog>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'


const route = useRoute()
const router = useRouter()

const dialogShow = ref<boolean>(true);
const password = ref<string>('')


const demoList = ref<any>([
    {
        id: '1',
        title: 'deepseek-r1模型',
        path: '/demo/deepseek'
    },
    {
        id: '2',
        title: 'wei音乐',
        path: '/weiMusic'
    },
    {
        id: '3',
        title: '收藏夹',
        path: '/collect'
    },
    {
        id: '4',
        title: '...',
        path: ''
    },
])

const onCancel = () => {
    router.back()
}

const goDemoItem = (item: any) => {
    if (item.path == '') {
        showToast('暂无演示内容')
    } else {
        router.push({
            path: item.path,
            query: {

            }
        })
    }
}

const onConfirm = () => {
    if (password.value != 'wei') {
        showFailToast('密码错误')
        router.back()
        return
    } else {
        dialogShow.value = false;
    }
}


onMounted(() => {

})

</script>


<style lang="scss" scoped>
.demoContent {
    width: 100%;
    min-height: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    .demoBox {
        width: 100%;
        padding: 15px;
        .demoBoxItem {
            width: 100%;
            height: 130px;
            background: aqua;
            border-radius: 16px;
            border: none;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            p {
                font-size: 25px;
                font-weight: 700;
            }
        }
    }
}
</style>